<!-- eslint-disable vue/valid-v-for -->
<template>
  <div class="page-container">
    <page-form :model="form" layout="vertical" div="true" ref="formRef">
      <card class="add-info-card" title="车辆信息" toggle>
        <!-- 不可编辑状态 -->
        <div class="relative section-item gray car-model-1000" v-if="!pageStatus">
          <div class="flex">
            <car-info-block :carInfo="car" :tags="[car.statusStr]" :fieldList="fieldList" />
          </div>
        </div>
        <!-- 可编辑状态 -->
        <page-form-row v-if="pageStatus == 'onlyCreate'">
          <page-form-item field="carId" label="车牌号" required :rules="{ required: true, message: '请选择车牌号' }">
            <remote-select
              v-model="form.carId"
              :params="{ idList: queryCarId }"
              type="car_licenseno_list"
              :allow-clear="false"
              @change="changeCarFn"
              @initList="getInitListFn"
              :disabled="pagefromReturnCar"
            />
          </page-form-item>
          <page-form-item label="车架号">
            <i-input disabled :model-value="carData?.vin" />
          </page-form-item>
          <page-form-item label="车型">
            <i-input disabled placeholder="请选择" :model-value="carData?.modelName" icon="down" />
          </page-form-item>
          <page-form-item label="车辆当前归属门店">
            <i-input disabled placeholder="请选择" :model-value="carData?.siteName" icon="down" />
          </page-form-item>
          <page-form-item label="归属车场">
            <i-input disabled placeholder="请选择" :model-value="carData?.libraryName" icon="down" />
          </page-form-item>
        </page-form-row>
      </card>
      <card class="add-info-card" title="维修单信息" toggle :showDivider="false">
        <page-form-row>
          <page-form-item field="siteId" label="维修单关联门店" required :rules="{ required: true, message: '请选择维修单关联门店' }">
            <remote-select v-model="form.siteId" :initStr="form.siteId ? form.siteName : ''" placeholder="请选择" type="site_listBystaff" />
          </page-form-item>
          <page-form-item field="arrivalTime" label="入厂时间" v-if="type == 'create' || type == 'edit'">
            <i-date-picker class="w-full" v-model="form.arrivalTime" show-time @change="changeTime" value-format="YYYY-MM-DD HH:mm:ss" />
          </page-form-item>
          <page-form-item
            v-else
            field="arrivalTime"
            label="入厂时间"
            required
            :rules="[{ required: true, message: '请选择入厂时间', trigger: 'change' }]"
          >
            <i-date-picker class="w-full" v-model="form.arrivalTime" show-time @change="changeTime" value-format="YYYY-MM-DD HH:mm:ss" />
          </page-form-item>

          <page-form-item field="leaveTime" label="出厂时间" v-if="type == 'create' || type == 'edit'">
            <i-date-picker
              class="w-full"
              :disabled="!form.arrivalTime"
              v-model="form.leaveTime"
              :disabledDate="disabledDate"
              :disabledTime="disabledTime"
              show-time
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </page-form-item>
          <page-form-item
            v-else
            field="leaveTime"
            label="出厂时间"
            required
            :rules="[{ required: true, message: '请选择出厂时间', trigger: 'change' }]"
          >
            <i-date-picker
              class="w-full"
              :disabled="!form.arrivalTime"
              v-model="form.leaveTime"
              :disabledDate="disabledDate"
              :disabledTime="disabledTime"
              show-time
              value-format="YYYY-MM-DD HH:mm:ss"
            />
          </page-form-item>

          <page-form-item label-component="div" style="position: relative" field="repairShopId" label="修理厂" v-if="type == 'create' || type == 'edit'">
            <template #label-extra>
              <!-- 新增供应商 -->
              <i-add-supplier typeText="修理" supplierType="0" @addOk="addOk" />
            </template>
            <remote-select
              v-model="form.repairShopId"
              type="supplier_list"
              :params="{
                supplierType: 0,
                idList: [form.repairShopId],
                status: 1,
                refreshSelect,
              }"
            />
          </page-form-item>
          <page-form-item
            v-else
            style="position: relative"
            field="repairShopId"
            label="修理厂"
            label-component="div"
            required
            :rules="[{ required: true, message: '请选择修理厂', trigger: 'change' }]"
          >
            <template #label-extra>
              <!-- 新增供应商 -->
              <i-add-supplier typeText="维修" supplierType="0" @addOk="addOk" />
            </template>
            <remote-select
              v-model="form.repairShopId"
              type="supplier_list"
              :params="{
                supplierType: 0,
                idList: [form.repairShopId],
                status: 1,
                refreshSelect,
              }"
            />
          </page-form-item>

          <page-form-item field="entranceKilometre" label="入厂里程">
            <i-input-number v-model="form.entranceKilometre" unit="公里" :precision="0" />
          </page-form-item>
          <page-form-item
            field="exportKilometre"
            label="出厂里程"
            :required="type == 'end' || type === 'finish'"
            :rules="[{ required: type == 'end' || type === 'finish', message: '请输入出厂里程', trigger: 'change' }]"
          >
            <i-input-number v-model="form.exportKilometre" unit="公里" :precision="0" />
          </page-form-item>
          <page-form-item label="承租人信息">
            <remote-select
              :disabled="pagefromReturnCar"
              v-model="form.memberId"
              :params="{
                oldId: form.memberId,
                carId: form.carId,
                orderTypeList: [2, 3],
              }"
              type="member_list_label"
              :mustParentShow="!form.carId"
              mustParentTip="请先选择车牌号"
              @change="changeMemberFn"
            />
          </page-form-item>
          <page-form-item label="关联订单号">
            <template #label-extra>交车人：{{ form.giveStaffName || '-' }}</template>
            <a-select
              allow-search
              placeholder="请选择"
              :mustParentShow="!form.carId"
              mustParentTip="请先选择车牌号"
              :disabled="pagefromReturnCar"
              v-model="form.orderId"
              @change="changeOrderIdFn"
              allow-clear
            >
              <a-option v-for="item in shortOrderIdList" :key="item.orderId" :value="item.orderId" :label="item.label">
                {{ item.label }}
              </a-option>
            </a-select>
          </page-form-item>

          <page-form-item
            field="undertakerId"
            label="负责人"
            :required="type === 'end' || type === 'finish'"
            :rules="[{ required: type === 'end' || type === 'finish', message: '请选择负责人', trigger: 'change' }]"
          >
            <remote-select
              v-model="form.undertakerId"
              placeholder="请选择"
              :mountedLoad="!!form.carId"
              type="staff_authOrg"
              :params="{ oldId: form.undertakerId, siteIdList: carSiteList }"
            />
          </page-form-item>

          <page-form-item field="remark" label="备注" size="2/3">
            <a-textarea class="textarea-in" placeholder="请输入" :max-length="50" v-model="form.remark" auto-size />
          </page-form-item>

          <page-form-item
            field="fileIdList"
            label="上传照片"
            size="1"
            :required="type === 'end' || type === 'finish'"
            :rules="[{ required: type === 'end' || type === 'finish', message: '请上传照片' }]"
          >
            <upload-img v-model="form.fileIdList" limit="30" margin />
          </page-form-item>

          <page-form-item field="detailList" label="维修内容" size="1">
            <div class="mains">
              <div class="mains-tlt">
                <div></div>
                <div>维修项目</div>
                <div class="choose-mains" v-if="type !== 'finish'" @click="chooseMarins">选择维修项目</div>
              </div>
              <!-- 新增、编辑、开始维修   只显示名称 -->
              <!-- <div class="mains-items" v-if="type != 'end' && form.detailList">
                <div class="mains-item" v-for="item in form.detailList" :key="item.id">
                  {{ item.repairItem }} <div style="margin-left: 6px; cursor: pointer" @click="deleteMain(item)"><icon-close /></div>
                </div>
              </div> -->
              <!-- <a-empty v-else /> -->
              <!-- 完成维修   显示表单 -->
              <div class="mains-form-items">
                <div class="mains-form-item" v-for="(item, index) in form.detailList" :key="item.id">
                  <div class="mains-form-tlt">
                    <div class="mains-form-tlt-name">{{ item.repairItem }}</div>
                    <div class="main-icon" style="color: #ea0000" v-if="type !== 'finish'" @click="deleteMain(item)">
                      <SvgIcon name="main-delete" color="#ea0000" />
                      删除
                    </div>
                  </div>
                  <div class="mains-form-in">
                    <page-form-item label="品牌" size="1/5">
                      <a-input :disabled="type == 'finish'" placeholder="请输入" v-model="item.maker" :max-length="30" />
                    </page-form-item>
                    <page-form-item label="单价" size="1/5">
                      <a-input-number
                        :disabled="type == 'finish'"
                        placeholder="请输入"
                        v-model="item.partPrice"
                        @blur="count($event, index, 'price')"
                        hide-button
                        :precision="2"
                        :min="0"
                        :max="99999999.99"
                      >
                        <template #append> 元 </template>
                      </a-input-number>
                    </page-form-item>
                    <page-form-item label="数量" size="1/5">
                      <a-input-number
                        :disabled="type == 'finish'"
                        placeholder="请输入"
                        v-model="item.num"
                        @blur="count($event, index, 'num')"
                        hide-button
                        :precision="0"
                        :min="0"
                        :max="99999999"
                      />
                    </page-form-item>
                    <page-form-item label="总价" size="1/5">
                      <a-input-number
                        :disabled="type == 'finish'"
                        placeholder="请输入"
                        v-model="item.price"
                        @blur="materialPriceCount($event, index, 'price')"
                        hide-button
                        :precision="2"
                        :min="0"
                        :max="99999999.99"
                      >
                        <template #append> 元 </template>
                      </a-input-number>
                    </page-form-item>
                    <page-form-item label="备注" size="1/5">
                      <i-input :disabled="type == 'finish'" placeholder="请输入" v-model="item.remark" :maxLength="30" />
                    </page-form-item>
                  </div>
                  <div class="mains-line" v-if="form.detailList.length != index + 1"></div>
                </div>
              </div>
            </div>
          </page-form-item>
        </page-form-row>
        <div class="all-count" v-if="form.detailList && form.detailList.length > 0">
          <!-- <icon-info-circle-fill style="font-size: 16px; color: #165dffff; margin-right: 4px" /> -->
          <icon-exclamation-circle style="font-size: 16px; color: #165dffff; margin-right: 4px" />
          合计：<span>{{ repairAmount || '0' }}元</span>
        </div>
      </card>
    </page-form>
  </div>
  <page-form-footer>
    <!-- <a-button type="outline" :loading="okLoading" @click="submitFn('nav')">确认并创建保养单</a-button> -->
    <a-button type="primary" :loading="okLoading" @click="submitFn('ok')">确认</a-button>
  </page-form-footer>
  <mains ref="maintenance" @saveCheck="getCheck" />
</template>

<script setup name="CarRepairForm">
  import { repairDetail, getSupplierList, findUserInfo, repairCreate, repairUpdate, getRelationOrderNo } from '@/api/asset/repair'
  import { getCarDetail, orderCarInfo } from '@/api/asset/car'
  import { ref, onMounted, computed } from 'vue'
  import mains from '../form/components/mains.vue'
  import { Message } from '@arco-design/web-vue'
  import dayjs from 'dayjs'
  import IAddSupplier from '@/components/input/i-add-supplier.vue'
  import useNavigate from '@/hooks/useNavigate'
  import { useRoute, useRouter } from 'vue-router'
  import useVisitedRouteStore from '@/store/modules/visited-routes'
  import useUserStore from '@/store/modules/user'

  const userStore = useUserStore()
  const visitedRouteStore = useVisitedRouteStore()
  const router = useRouter()
  const currentRoute = router.currentRoute.value
  const { navigateTo, navigateBack, navigateClose } = useNavigate()
  const route = useRoute()
  const routePrams = route.params
  const pageStatus = ref(null)
  const pagefromReturnCar = ref(false) // 还车时，在短租订单中快捷创建维修单，默认带入车辆信息、关联单号，不支持编辑
  const pagefrom = ref(null) //车辆管理carManage
  const form = ref({})
  const carData = ref({})
  const changeCarFn = (_, option = {}) => {
    carData.value = option
    carSiteList.value = [carData.value.siteId]
    form.value.siteId = carData.value.siteId
    form.value.siteName = carData.value.siteName
    formRef.value.validateField(['siteId'])
    form.value.entranceKilometre = option.totalMileage //选车牌号自动带入入厂里程
    shortOrderIdList.value = []
    form.value.orderNo = ''
    form.value.giveStaffName = ''

    // 清空承租人信息
    form.value.memberId = null
    // 清空订单信息
    clearOrderInfo()

    getOrderNumber(true) //查 关联订单号列表

    if (!form.value.undertakerId) {
      form.value.undertakerId = userStore.employeeId
    }
  }

  // 清空订单相关信息
  const clearOrderInfo = () => {
    form.value.orderId = null
    form.value.orderNo = null
    form.value.giveStaffId = null
    form.value.orderType = null
    form.value.giveStaffName = null
  }

  // 长租类型车辆信息不展示保养单号
  const fieldList = ref([])

  const changeTime = (current) => {
    if (current) {
      const start = dayjs(current).valueOf()
      const end = form.value.leaveTime ? dayjs(form.value.leaveTime).valueOf() : 0 // form.value.leaveTime 可能为null
      if (start > end) {
        // 入厂时间改变且大于出厂时间，出厂时间+1
        form.value.leaveTime = dayjs(current).add(1, 'day').format('YYYY-MM-DD HH:mm:ss')
      }
    } else {
      form.value.leaveTime = ''
    }
  }

  // 更换承租人
  const changeMemberFn = (value) => {
    let defaultSelectFirst = false
    if (value) {
      defaultSelectFirst = true
    }
    getOrderNumber(defaultSelectFirst)
  }

  const shortOrderIdList = ref([])

  /**
   * defaultSelectFirst 默认选中第一个
   */
  const getOrderNumber = (defaultSelectFirst) => {
    getRelationOrderNo({
      carId: form.value.carId,
      orderTypeList: [2, 3],
      memberId: form.value.memberId,
      useAuth: 1,
      oldOrderType: form.value.orderType,
      oldOrderId: form.value.orderId,
    }).then((res) => {
      if (res.result?.length > 0) {
        res.result.forEach((item) => {
          item.label = '【' + item.orderTypeStr + '】' + item.orderNo
          item.value = item.orderId
        })
        shortOrderIdList.value = res.result
      } else {
        shortOrderIdList.value = []
        clearOrderInfo()
      }
      // 处理默认选中逻辑
      if (shortOrderIdList.value?.length > 0) {
        // 当前存在已选择的订单时，判断是否存在于当前的列表中，如存在，则不再重新给与默认值
        if (form.value.orderId) {
          const hasSameOrderId = shortOrderIdList.value.some((item) => item.orderId == form.value.orderId)
          if (hasSameOrderId) {
            // 存在相同订单，则不再默认选中第一个
            defaultSelectFirst = false
          }
        }
        if (defaultSelectFirst) {
          const first = shortOrderIdList.value[0]
          form.value.orderId = first.orderId //默认第一个
          form.value.orderNo = first.orderNo
          form.value.giveStaffId = first.giveStaffId //默认第一个
          form.value.orderType = first.orderType
          form.value.giveStaffName = first.giveStaffName
          // 如果当前不存在承租人
          if (!form.value.memberId) {
            // 承租人
            form.value.memberId = first.memberId
            // 重新获取关联订单号列表
            getOrderNumber()
          }
        }
      }
    })
  }
  // 选择关联订单号
  const changeOrderIdFn = (value) => {
    if (value) {
      shortOrderIdList.value.map((item) => {
        if (item.orderId === value) {
          form.value.orderId = item.orderId
          form.value.orderNo = item.orderNo
          form.value.giveStaffId = item.giveStaffId
          form.value.orderType = item.orderType
          form.value.giveStaffName = item.giveStaffName

          // 承租人信息
          form.value.memberId = item.memberId
          form.value.memberPhone = item.memberPhone
          form.value.memberName = item.memberName
        }
      })
    } else {
      clearOrderInfo()
    }
  }

  // 添加供应商成功
  const addOk = (id) => {
    form.value.repairShopId = id
    console.log(form.value.repairShopId)
    supplierList()
  }

  const getInitListFn = (list) => {
    if (queryCarId.value) {
      let option = list.find((item) => item.id == queryCarId.value)
      changeCarFn(queryCarId.value, option)
    }
  }

  // 计算单个价格
  const count = (e, index) => {
    repairAmount.value = 0
    if (form.value.detailList[index].num != null && form.value.detailList[index].partPrice != null) {
      form.value.detailList[index].price = form.value.detailList[index].num * form.value.detailList[index].partPrice
    }
    getAllCount()
  }

  // 单个总价输入
  const materialPriceCount = () => {
    repairAmount.value = 0
    getAllCount()
  }

  // 计算总价
  const repairAmount = ref()
  const getAllCount = () => {
    repairAmount.value = 0
    form.value.detailList.forEach((i) => {
      repairAmount.value += i.price ? i.price : 0
    })
    console.log('总价', repairAmount.value)
  }

  // 弹窗选择的维修项目回显
  const getCheck = (e) => {
    var arr = form.value.detailList
    if (e && e.length) {
      e.forEach((el) => {
        if (arr && arr.length) {
          arr.forEach((ol) => {
            if (el.repairItemId == ol.repairItemId) {
              el = ol
            }
          })
        }
      })
    }
    form.value.detailList = e
    getAllCount() //重新计算
  }

  // 选择维修项目(新增/编辑)
  const maintenance = ref(null)
  const chooseMarins = () => {
    maintenance.value.show(form.value.detailList ? form.value.detailList : [])
  }

  // 删除维修项目(新增/编辑)
  const deleteMain = (e) => {
    form.value.detailList = form.value.detailList.filter(function (item) {
      return item !== e
    })
    getAllCount() //重新计算
  }

  // // 默认车牌列表
  // const licenseLists = ref([])
  // const getLicense = (e) => {
  //   licenseLists.value = []
  //   getLicenseNoLike({ pageNumber: 1, pageSize: 10, licenseNoLike: e }).then((res) => {
  //     console.log(res)
  //     licenseLists.value = res.result
  //   })
  // }

  // 默认日期时间
  const getNowDate = (n) => {
    var timestamp = Date.parse(new Date())
    timestamp = timestamp / 1000
    timestamp += Number(n) * 86400
    var newTime = new Date(timestamp * 1000)
    return newTime
  }

  const getDates = () => {
    form.value.arrivalTime = dayjs(getNowDate(0)).format('YYYY-MM-DD HH:mm:ss')
    form.value.leaveTime = dayjs(getNowDate(1)).format('YYYY-MM-DD HH:mm:ss')
  }

  const disabledDate = (value) => {
    return dayjs(form.value.arrivalTime).startOf('day').valueOf() > dayjs(value).valueOf()
  }

  const range = (start, end) => {
    const result = []
    for (let i = start; i < end; i++) {
      result.push(i)
    }
    return result
  }

  const disabledTime = (current) => {
    if (!dayjs(form.value.arrivalTime).isSame(dayjs(current), 'day')) {
      return {}
    }

    const hour = dayjs(form.value.arrivalTime).hour()
    const minute = dayjs(form.value.arrivalTime).minute()
    const second = dayjs(form.value.arrivalTime).second()

    if (dayjs(current).hour() > hour) {
      return {
        disabledHours: () => range(0, hour),
      }
    } else if (dayjs(current).minute() > minute) {
      return {
        disabledHours: () => range(0, hour),
        disabledMinutes: () => range(0, minute + 1),
      }
    } else {
      return {
        disabledHours: () => range(0, hour),
        disabledMinutes: () => range(0, minute + 1),
        disabledSeconds: () => range(0, second + 1),
      }
    }
  }

  // 编辑时，获取详情
  const car = ref({})
  const carSiteList = ref()
  const getDetail = (id) => {
    repairDetail({ id: id }).then((res) => {
      form.value.repairShopId = res.result.repairShopId ? res.result.repairShopId.toString() : ''
      form.value = res.result
      form.value.detailList = res.result.detailList ?? []

      if ((type.value === 'end' || type.value === 'finish') && !form.value.undertakerId) {
        form.value.undertakerId = userStore.employeeId
      }

      car.value = res.result
      carSiteList.value = [car.value.siteId]
      repairAmount.value = res.result.repairAmount //总价
      getOrderNumber() //查 关联订单号列表
    })
  }

  // 修理厂（供应商）
  const supplierLists = ref([])
  const supplierList = () => {
    getSupplierList({ supplierType: 0, status: 1 }).then((res) => {
      supplierLists.value = res.result
    })
  }

  // 获取当前用户
  const orgIdList = ref([])
  const getUserInfo = () => {
    findUserInfo().then((res) => {
      orgIdList.value.push(res.result.epId)
    })
  }

  const formRef = ref()
  const okLoading = ref(false)
  const submitFn = (navType) => {
    formRef.value.validate((error) => {
      if (!error) {
        okLoading.value = true
        // 验证通过后,调用保存,返回刷新列表
        if (type.value == 'create') {
          form.value.status = 0
          repairCreate({ ...form.value })
            .then((res) => {
              Message.success(res.message)
              submitNext(navType)
            })
            .finally(() => {
              okLoading.value = false
            })
        } else {
          if (type.value == 'edit') {
            form.value.status = car.value.status
          }
          if (type.value == 'start') {
            form.value.status = 1
          }
          if (type.value == 'end') {
            form.value.status = 2
          }
          repairUpdate({ ...form.value })
            .then((res) => {
              Message.success(res.message)
              submitNext(navType)
            })
            .finally(() => {
              okLoading.value = false
            })
        }
      }
    })
  }

  const submitNext = (navType) => {
    if (navType == 'nav') {
      // 确认并创建保养单
      var maintenanceParams = {
        // repairShopId: form.value.repairShopId, //保养厂
        arrivalTime: form.value.arrivalTime, //入厂时间
        leaveTime: form.value.leaveTime, //出厂时间
        exportKilometre: form.value.exportKilometre, //出厂里程
      }
      // 查该修理厂是否可以保养
      supplierLists.value.forEach((i) => {
        if (form.value.repairShopId == i.id) {
          if (i.supplierTypes.indexOf('1') > -1) {
            maintenanceParams.repairShopId = form.value.repairShopId
          }
        }
      })
      visitedRouteStore.closeItemVisitedView(currentRoute.fullPath)
      navigateTo(
        `/car-maintenance/create/${form.value.carId}?repairParams=${JSON.stringify(maintenanceParams)}&page=repair`,
        undefined,
        'replace'
      )
    } else {
      // 仅确认
      if (pagefrom.value == 'maintenance') {
        navigateClose()
      } else {
        navigateBack()
      }
    }
  }

  // 获取订单详情=>获取车信息和订单信息
  const getCarInfo = (id, type) => {
    orderCarInfo({ id: id, type: type }).then((res) => {
      car.value = {
        licenseNo: res.result.licenseNo,
        vin: res.result.vin,
        modelName: res.result.modelName,
        siteName: res.result.siteName,
        libraryName: res.result.libraryName,
      }
      form.value.orderId = res.result.orderId
      form.value.carId = res.result.carId
      form.value.orderNo = res.result.orderCode
      form.value.giveStaffName = res.result.giveStaffName
      form.value.giveStaffId = res.result.giveStaffId
      form.value.siteId = res.result.siteId
      form.value.siteName = res.result.siteName
      form.value.memberId = res.result.memberId
      form.value.memberName = res.result.memberName
      form.value.memberPhone = res.result.mememberPhone

      if (!form.value.undertakerId) {
        form.value.undertakerId = userStore.employeeId
      }

      shortOrderIdList.value = [
        {
          label: res.result.orderCode,
          orderNo: res.result.orderCode,
          value: res.result.orderId,
          orderId: res.result.orderId,
        },
      ]
    })
  }

  const type = ref(null)
  // eslint-disable-next-line vue/return-in-computed-property
  const queryCarId = computed(() => {
    if (route.query.carId) {
      // eslint-disable-next-line vue/no-side-effects-in-computed-properties
      form.value.carId = route.query.carId
      let carId = route.query.carId
      return carId ? [carId] : undefined
    }
  })
  // 获取车辆详情
  const getCarDetails = (carId) => {
    getCarDetail({ id: carId }).then((res) => {
      car.value = res.result
      form.value.entranceKilometre = res.result.totalMileage //选车牌号自动带入入厂里程
      form.value.siteId = res.result.siteId
      form.value.siteName = res.result.siteName

      if (!form.value.undertakerId) {
        form.value.undertakerId = userStore.employeeId
      }
    })
  }
  onMounted(() => {
    const id = routePrams.id
    const rey = routePrams.rey
    const page = route.query.page
    const repairParams = route.query.repairParams ? JSON.parse(route.query.repairParams) : ''
    pagefrom.value = route.query.page
    if (page == 'maintenance') {
      type.value = 'create'
      if (id) {
        console.log('carId', id)
        form.value.carId = id
        getCarDetails(form.value.carId)
        getOrderNumber(true) //查 关联订单号列表
      }
      supplierList()
      getUserInfo()
      // 保养跳转此页
      form.value.repairShopId = repairParams.maintenanceShopId //修理厂
      form.value.arrivalTime = repairParams.entranceDate //入厂时间
      form.value.leaveTime = repairParams.exportDate //出厂时间
      form.value.exportKilometre = repairParams.exportKilometre //出厂里程
    } else if (page == 'carManage') {
      type.value = 'create'
      // 车辆管理
      form.value.carId = id
      getCarDetails(form.value.carId)
      pagefrom.value = page
      getOrderNumber(true) //查 关联订单号列表
    } else if (page == 'carRepair') {
      // 车辆维修
      if (rey) {
        //start开始维修  end完成维修
        getDetail(rey.split('&')[0])
        type.value = rey.split('&')[1]
      } else {
        if (id == 'create') {
          // 维修列表 - 新建维修单
          type.value = 'create'
          pageStatus.value = 'onlyCreate' //维修列表进来的，车辆可编辑状态
          console.log('维修列表进来的，车辆可编辑状态')
        } else {
          // 编辑
          getDetail(id)
          type.value = 'edit'
        }
      }
    } else if (page == 'shortOrder') {
      // 短租
      type.value = 'create'
      form.value.orderType = 2
      // 还车时，在短租订单中快捷创建维修单，默认带入车辆信息、关联单号，不支持编辑
      pagefromReturnCar.value = true
      form.value.orderId = id
      getCarInfo(form.value.orderId, 2)
    } else if (page == 'longOrder') {
      // 长租
      type.value = 'create'
      form.value.orderType = 3
      pagefromReturnCar.value = true
      form.value.orderId = id
      getCarInfo(form.value.orderId, 3)
    }

    if (page == 'longOrder' || page == 'maintenance') {
      fieldList.value = [
        { label: '车架号', prop: 'vin' },
        { label: '车辆当前归属门店', prop: 'siteName' },
        { label: '归属车场', prop: 'libraryName' },
      ]
    } else {
      fieldList.value = [
        { label: '车架号', prop: 'vin' },
        { label: '车辆当前归属门店', prop: page == 'carRepair' ? 'carSiteName' : 'siteName' },
        { label: '归属车场', prop: 'libraryName' },
        { label: '维修单号', prop: 'repairNo' },
      ]
    }
    // getLicense()
    getDates()
    supplierList()
    getUserInfo()
  })
</script>

<style lang="less" scoped>
  .car-msg {
    width: calc(100% - 40px);
    padding: 20px;
    background-color: #f7f8fa;
    .car-lic {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      div:nth-child(1) {
        color: #1d2129;
        font-size: 20px;
        font-weight: 600;
      }
      div:nth-child(2) {
        color: #e45800;
        font-size: 14px;
        font-weight: 400;
        padding: 4px 10px;
        background-color: #fff9e8;
        margin-left: 12px;
      }
    }
    .car-name {
      color: #1d2129;
      font-size: 14px;
      margin: 16px 0;
    }
    .car-other {
      color: #1d2129;
      font-size: 14px;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      div {
        margin-right: 56px;
      }
    }
  }

  .add-card-tip {
    margin-bottom: 16px;
    padding: 12px 16px;
    color: #1d2129;
    font-size: 12px;
    background-color: #e8f3ff;
  }

  .mains {
    position: relative;
    width: 100%;
    background-color: rgba(247, 248, 250, 0.5);
    padding: 20px;
    .mains-tlt {
      font-size: 14px;
      color: #1d2129;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      div:nth-child(1) {
        width: 3px;
        height: 16px;
        background-color: #165dff;
      }
      div:nth-child(2) {
        color: #1d2129;
        font-size: 14px;
        font-weight: 500;
        margin: 0 16px 0 8px;
      }
      .choose-mains {
        display: inline-block;
        padding: 5px 16px;
        color: #fff;
        font-size: 14px;
        font-weight: 500;
        background: #1890ff;
        border-radius: 2px;
        cursor: pointer;
      }
    }
    .mains-items {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: wrap;
      .mains-item {
        margin-top: 10px;
        margin-right: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 3px 8px;
        border: 1px solid #e5e6eb;
        border-radius: 2px;
      }
    }
    .mains-form-items {
      margin-top: 16px;
      width: 100%;
      .mains-form-item {
        width: 100%;
        .mains-form-tlt {
          display: flex;
          justify-content: flex-start;
          align-items: center;
          .mains-form-tlt-name {
            color: var(--color-text-1);
            font-weight: 500;
          }
          .main-icon {
            margin-left: 22px;
            cursor: pointer;
          }
        }
        .mains-form-in {
          width: 100%;
          margin-top: 16px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          .mains-form-initem {
            width: 24%;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
            align-items: flex-start;
          }
        }
        .mains-line {
          width: 100%;
          height: 1px;
          background-color: #f2f3f5;
          margin: 20px 0;
        }
      }
    }
  }
  .all-count {
    width: 100%;
    text-align: right;
    color: var(--color-text-1);
    font-size: 14px;
    span {
      color: #165dff;
      font-size: 18px;
      font-weight: 600;
    }
  }

  :deep(.upload-item) {
    margin: 0px 16px 0 0;
  }
  .textarea-in {
    width: 100%;
  }
  .operate-list {
    position: absolute;
    right: -236px;
    margin-left: -40px;

    .operate-btn + .operate-btn {
      margin-left: 16px;
    }
  }

  .upload-wrapper {
    padding: 20px 0 0;

    .upload-content {
      width: 40%;
      margin-right: 40px;
    }
  }
  .empty {
    margin-top: 100px;
    text-align: center;
    color: rgba(0, 0, 0, 0.25);
  }
</style>
